<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章列表 - 人才职业生涯规划平台</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="../css/article-list.css">
</head>
<body>
    <div class="app-container">
        <!-- 头部导航 -->
        <header class="header">
            <div class="back-btn">
                <i class="bi bi-arrow-left"></i>
            </div>
            <h1 class="page-title">行业洞察</h1>
            <div class="action-btns">
                <i class="bi bi-search"></i>
            </div>
        </header>

        <!-- 主内容区 -->
        <main class="main-content">
            <!-- 分类标签 -->
            <section class="category-tabs">
                <div class="tabs-container">
                    <div class="tab active">全部</div>
                    <div class="tab">AI技术</div>
                    <div class="tab">金融科技</div>
                    <div class="tab">新能源</div>
                    <div class="tab">医疗健康</div>
                    <div class="tab">教育行业</div>
                    <div class="tab">互联网</div>
                </div>
            </section>

            <!-- 推荐文章 -->
            <section class="featured-articles">
                <div class="featured-article" onclick="window.location.href='article-details.html'">
                    <img src="../img/insight1.jpg" alt="AI行业趋势" class="featured-img">
                    <div class="featured-content">
                        <h2>AI产业发展现状与人才需求分析</h2>
                        <p>随着ChatGPT等大模型的兴起，人工智能技术迎来了新一轮爆发式增长...</p>
                        <div class="article-meta">
                            <div class="author-info">
                                <img src="../img/avatar1.jpg" alt="作者头像" class="author-avatar">
                                <span>人工智能研究员</span>
                            </div>
                            <div class="meta-data">
                                <span><i class="bi bi-eye"></i> 2.3k</span>
                                <span><i class="bi bi-hand-thumbs-up"></i> 156</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 文章列表 -->
            <section class="article-list-section">
                <div class="article-list">
                    <div class="article-item" onclick="window.location.href='article-details.html'">
                        <div class="article-img">
                            <img src="../img/insight2.jpg" alt="金融行业趋势">
                        </div>
                        <div class="article-content">
                            <h3>金融科技创新与人才转型趋势</h3>
                            <p class="article-desc">传统金融机构数字化转型加速，复合型人才成为香饽饽...</p>
                            <div class="article-meta">
                                <div class="author-info">
                                    <img src="../img/avatar2.jpg" alt="作者头像" class="author-avatar">
                                    <span>金融科技专家</span>
                                </div>
                                <span class="publish-time">3天前</span>
                            </div>
                        </div>
                    </div>

                    <div class="article-item" onclick="window.location.href='article-details.html'">
                        <div class="article-img">
                            <img src="../img/insight3.jpg" alt="新能源行业趋势">
                        </div>
                        <div class="article-content">
                            <h3>新能源产业人才需求与能力模型构建</h3>
                            <p class="article-desc">双碳目标下，新能源产业人才缺口剧增，复合技能成为关键...</p>
                            <div class="article-meta">
                                <div class="author-info">
                                    <img src="../img/avatar3.jpg" alt="作者头像" class="author-avatar">
                                    <span>能源行业分析师</span>
                                </div>
                                <span class="publish-time">4天前</span>
                            </div>
                        </div>
                    </div>

                    <div class="article-item" onclick="window.location.href='article-details.html'">
                        <div class="article-img">
                            <img src="../img/article1.jpg" alt="医疗行业趋势">
                        </div>
                        <div class="article-content">
                            <h3>医疗健康领域的职业发展路径与前景展望</h3>
                            <p class="article-desc">随着医疗技术创新和大健康产业的崛起，医疗健康领域的人才需求呈现多元化趋势...</p>
                            <div class="article-meta">
                                <div class="author-info">
                                    <img src="../img/avatar4.jpg" alt="作者头像" class="author-avatar">
                                    <span>医疗产业研究员</span>
                                </div>
                                <span class="publish-time">5天前</span>
                            </div>
                        </div>
                    </div>

                    <div class="article-item" onclick="window.location.href='article-details.html'">
                        <div class="article-img">
                            <img src="../img/article2.jpg" alt="教育行业趋势">
                        </div>
                        <div class="article-content">
                            <h3>教育行业数字化转型与创新人才培养</h3>
                            <p class="article-desc">教育行业数字化转型带来了全新的教学模式和学习体验，同时也对从业者提出了新的要求...</p>
                            <div class="article-meta">
                                <div class="author-info">
                                    <img src="../img/avatar5.jpg" alt="作者头像" class="author-avatar">
                                    <span>教育创新专家</span>
                                </div>
                                <span class="publish-time">1周前</span>
                            </div>
                        </div>
                    </div>

                    <div class="article-item" onclick="window.location.href='article-details.html'">
                        <div class="article-img">
                            <img src="../img/article3.jpg" alt="互联网行业趋势">
                        </div>
                        <div class="article-content">
                            <h3>2023互联网行业人才流动趋势报告</h3>
                            <p class="article-desc">大厂裁员潮后，互联网人才流向何方？新兴赛道如何吸引顶尖人才？本报告带你了解最新动向...</p>
                            <div class="article-meta">
                                <div class="author-info">
                                    <img src="../img/avatar6.jpg" alt="作者头像" class="author-avatar">
                                    <span>互联网分析师</span>
                                </div>
                                <span class="publish-time">1周前</span>
                            </div>
                        </div>
                    </div>

                    <div class="article-item" onclick="window.location.href='article-details.html'">
                        <div class="article-img">
                            <img src="../img/article4.jpg" alt="创业趋势">
                        </div>
                        <div class="article-content">
                            <h3>从就业到创业：大学生创业全攻略</h3>
                            <p class="article-desc">创业是职业发展的另一种选择，本文为有创业意向的大学生提供从0到1的全面指导...</p>
                            <div class="article-meta">
                                <div class="author-info">
                                    <img src="../img/avatar7.jpg" alt="作者头像" class="author-avatar">
                                    <span>创业导师</span>
                                </div>
                                <span class="publish-time">2周前</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 加载更多 -->
                <div class="load-more">
                    <button class="load-more-btn">加载更多</button>
                </div>
            </section>
        </main>

        <!-- 底部导航栏 -->
        <footer class="tab-bar">
            <div class="tab-item">
                <i class="bi bi-house-door"></i>
                <span>首页</span>
            </div>
            <div class="tab-item active">
                <i class="bi bi-compass-fill"></i>
                <span>发现</span>
            </div>
            <div class="tab-item">
                <i class="bi bi-person-badge"></i>
                <span>经纪人</span>
            </div>
            <div class="tab-item">
                <i class="bi bi-person"></i>
                <span>我的</span>
            </div>
        </footer>
    </div>

    <script src="../js/main.js"></script>
    <script src="../js/article-list.js"></script>
</body>
</html> 